<script setup lang="ts">
import { dayjs } from 'element-plus'
import { computed } from 'vue'
import { useRouter } from 'vue-router'

import { sysintegApi } from '~/api'

import { clearToken, clearUserInfo, toLogin } from '~/composables/auth'
import { getWeatherImg, type WeatherInfo } from './weather'

const props = withDefaults(defineProps<{
  titleImg?: string
  showErp?: boolean
  showHr?: boolean
  showEnergy?: boolean
  showWeather?: boolean
  showTime?: boolean
}>(), {
  showErp: true,
  showHr: true,
  showEnergy: true,
  showWeather: true,
  showTime: true,
})

const router = useRouter()

const date = ref(dayjs().format('YYYY.MM.DD'))
const time = ref(dayjs().format('HH:mm:ss'))

const appTitle = computed(() => {
  return APP_TITLE
})

const weather = ref<WeatherInfo>({
  city: '',
  wea: '',
  wea_img: '',
  tem: '',
  tem_day: '',
  tem_night: '',
})
const weatherImg = computed(() => {
  return getWeatherImg(weather.value?.wea_img ?? '')
})

const isDev = import.meta.env.DEV

async function getWeather() {
  if (!weather.value.city && props.showWeather) {
    const res = await sysintegApi.getWeatherInfo()
    weather.value = res.data as WeatherInfo
    return res.data
  }
}

function logout() {
  clearToken()
  clearUserInfo()
  toLogin()
}

function toErpDashboard() {
  const href = isDev
    ? `http://localhost:8080/#/erp-dashboard`
    : `${location.origin}/sysinteg/#/erp-dashboard`
  try {
    if (top?.location) {
      top.location.href = href
    }
    else {
      location.href = href
    }
  }
  catch (e) {
    location.href = href
  }
}

function toHrDashboard() {
  const href = isDev
    ? `http://localhost:8080/#/hr-dashboard`
    : `${location.origin}/sysinteg/#/hr-dashboard`
  try {
    if (top?.location) {
      top.location.href = href
    }
    else {
      location.href = href
    }
  }
  catch (e) {
    location.href = href
  }
}

function toEnergyDashboard() {
  router.push('/reload')
}

function toAdminPage() {
  const href = isDev
    ? `http://localhost:3000/#/system-navigation?iwannatoaminpage=1`
    : `${location.origin}/tomato/#/system-navigation?iwannatoaminpage=1`
  try {
    if (top?.location) {
      top.location.href = href
    }
    else {
      location.href = href
    }
  }
  catch (e) {
    location.href = href
  }
}

onMounted(() => {
  if (props.showWeather) {
    getWeather()
  }
  if (props.showTime) {
    setInterval(() => {
      date.value = dayjs().format('YYYY.MM.DD')
      time.value = dayjs().format('HH:mm:ss')
    }, 1000)
  }
})
</script>

<template>
  <div class="dashboard-header h-16 w-full">
    <div class="dashboard-top absolute left-0 right-0 top-0 h-17 w-full text-center">
      <h2 class="font-[微软雅黑]">
        {{ appTitle }}
      </h2>
    </div>
    <div v-if="showTime" class="header-time absolute bottom-0 bottom-0 left-0 top-0 flex flex-col justify-center text-right">
      <span class="mt-2 w-30 px-4 text-xl line-height-none font-pmzd">{{ time }}</span>
      <span class="px-4 text-xs font-pmzd">{{ date }}</span>
    </div>
    <div v-if="weather && showWeather" class="header-weather absolute bottom-0 left-31 top-2 z-1 flex items-center">
      <div v-if="weather.city" class="mr-3 text-xl font-pmzd">
        {{ weather.city }}
      </div>
      <ElImage :src="weatherImg" class="h-10 w-10" />
      <div class="ml-2 flex flex-col text-right">
        <div class="">
          <span class="text-inherit opacity-80">{{ weather.wea }}</span>
        </div>
        <div class="text-sm line-height-none font-pmzd">
          {{ weather.tem_night }}~{{ weather.tem_day }}℃
        </div>
      </div>
    </div>
    <div
      v-if="showErp"
      class="menu-left-1 menu-item text-lg font-pmzd"
      @click="toErpDashboard"
    >
      <span>进销存数据</span>
    </div>
    <div
      v-if="showHr"
      class="menu-item menu-right-1 text-lg font-pmzd"
      @click="toHrDashboard"
    >
      <span>人力资源</span>
    </div>
    <div
      v-if="showEnergy"
      class="menu-item active menu-right-2 text-lg font-pmzd"
      @click="toEnergyDashboard"
    >
      <span>能源生产</span>
    </div>
    <div class="header-nav absolute bottom-0 right-40 top-0 z-1 mt-2 flex cursor-pointer items-center opacity-80 transition-all hover:opacity-100" @click="toAdminPage">
      <span class="text-[#CDECF3]">进入系统</span>
    </div>
    <div class="header-exit absolute bottom-0 right-4 top-0 z-1 mt-2 flex cursor-pointer items-center opacity-80 transition-all hover:opacity-100" @click="logout">
      <span class="exit-icon" />
      <span class="text-[#B4CFF6]">退</span>
      <span class="text-[#CDECF3]">出系统</span>
    </div>
  </div>
</template>

<style lang="scss">
.dashboard-header {
  background-color: transparent;
  background-image: url('./header-bbg.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}
.dashboard-top {
  background-color: transparent;
  background-image: url('./header-bg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center top;
}
.menu-item,
.header-weather,
.header-time {
  --font-color: #C0E7FF;
  color: var(--font-color);
  opacity: 0.9;
}
.header-weather {
  &:before {
    content: '';
    display: block;
    width: 1px;
    height: 1.4rem;
    background: var(--font-color);
    opacity: 0.4;
    margin-right: 1rem;
  }
}
.menu-item {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: 0.4rem;
  padding: 5px 15px 10px 15px;
  cursor: pointer;
  opacity: 0.8;
  transition: all .3s cubic-bezier(.25, .8, .25, 1);
  transform: translate(-50%, -50%);
  &:hover {
    opacity: 1;
  }
  &.menu-left-1 {
    margin-left: -32rem;
    @media screen and (max-width: 1670px) {
      margin-left: -30rem;
    }
    @media screen and (max-width: 1400px) {
      margin-left: -23rem;
    }
  }
  &.menu-right-1 {
    margin-left: 32rem;
    @media screen and (max-width: 1670px) {
      margin-left: 30rem;
    }
    @media screen and (max-width: 1400px) {
      margin-left: 23rem;
    }
  }
  &.menu-right-2 {
    margin-left: 40rem;
    @media screen and (max-width: 1670px) {
      margin-left: 38rem;
    }
    @media screen and (max-width: 1400px) {
      margin-left: 32rem;
    }
  }
  &.active {
    background-color: transparent;
    background-image: url('./menu-item-active.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 1;
  }
}
.exit-icon {
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  background: url('./exit-icon.png') no-repeat;
  background-size: cover;
  margin-right: 5px;
}
</style>
